<section>
  <h4>Pills tabs:</h4>
  <d-tabs [(activeTab)]="tabActiveId" type="pills">
    <d-tab *ngFor="let item of tabItems" [id]="item.id">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>

  <h4 style="margin-top: 40px">竖向排列:</h4>
  <d-tabs [(activeTab)]="tabActiveId2" type="pills" [vertical]="true">
    <d-tab *ngFor="let item of tabItems" [id]="item.id">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>
</section>
<section>
  <h4 style="margin-top: 40px">Option tabs:</h4>

  <d-tabs [(activeTab)]="tabActiveId" type="options">
    <d-tab *ngFor="let item of tabItems" [id]="item.id" [disabled]="item.disabled">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>
  <h4 style="margin-top: 40px">Option tabs with fix width 100px:</h4>

  <d-tabs [(activeTab)]="tabActiveId2" type="options" customWidth="100px">
    <d-tab *ngFor="let item of tabItems" [id]="item.id" [disabled]="item.disabled">
      <ng-template dTabTitle>
        {{ item.title }}
      </ng-template>
      <ng-template dTabContent>
        {{ item.content }}
      </ng-template>
    </d-tab>
  </d-tabs>
</section>
